a.header-nav-link {
  margin-right: 10px;
  display: inline-block;
  font-size: 0;

  &.active, &:hover {
    font-weight: 700;
  }

  span {
    vertical-align: middle;
    display: inline-block;
    width: 40px;
    text-align: center;
    font-size: 16px;
    color: $primary;
  }

  img {
    vertical-align: middle;
    display: inline-block;
    width: 30px;
    height: 30px;
  }
}

.main-content.news .list-controls {
  margin: 0;
}

body.news #main-outlet {
  > span, .container:not(.list-container), .list-controls {
    display: none;
  }
}

#list-area.news {
  display: flex;
  
  > span {
    display: none;
  }
  
  .topic-list-contents {
    width: 750px;
  }
  
  .contents {

    .topic-list {
      display: block;

      thead {
        display: none;
      }

      tbody {
        border-top: none;
        width: 100%;
        display: block;

        td {
          padding: 0;
        }

        tr {
          margin-top: 20px;
          display: inline-block;
          width: 100%;
        }

        tr.topic-list-item:first-of-type {
          margin-top: 0;
          
          .news-item-thumbnail {
            margin-top: 0;
          }
        }
        
        tr.topic-list-item:last-of-type {
          border-bottom: none;
        }
        
        .news-item {
          width: 100%;
          display: block;
          box-sizing: border-box;

          .news-item-thumbnail {
            float: initial;
            margin: 20px 0;
            padding: 0;
            
            img {
              width: 100%;
              object-fit: cover;
            }
          }

          .news-item-title {
            margin: 15px 0;

            a {
              font-size: 35px;
              line-height: 40px;
              color: $primary;
            }
            
            .link-bottom-line {
              display: flex;
              
              > span {
                margin: 0 5px;
              }

              .news-item-author, .news-item-date {
                font-size: 1em;
              }
            }
          }

          .news-item-body {
            max-height: initial;
            color: $primary;
          }

          .news-item-gutter {
            margin: 10px 0;
            display: flex;
            
            .posts-map {
              font-size: 1em;
            }
            
            button.share {
              margin-left: auto;
            }
          }
        }
      }
    }
    
    #share-link .title {
      display: none;
    }
  }

  .sidebar {
    padding: 0px 0 0 30px;
    border-left: 1px solid $primary-low;
    margin-left: 40px;
    max-width: 300px;
    
    .sidebar-title {
      padding-bottom: 5px;
      border-bottom: 1px solid $primary-low;
      font-size: 1.3em;
    }
    
    ul {
      list-style: none;
      margin: 0;
      
      li {
        margin: 10px 0;
        
        .sidebar-topic-title a {
          color: $primary;
        }
        
        .sidebar-topic-meta {
          font-size: 0.8em;
          color: rgba($primary-medium, 0.8);
        }
        
        .sidebar-topic-meta a {
          font-size: 1em;
          color: rgba($primary-medium, 0.8);
        }
      }
    }
  }
}
